<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		</style>
	</head>
	<body>
		<div id="app">
			{{count}}
			<p>
				<button @click="add">更新数据</button>
			</p>
		</div>
		<button onclick="app.$destroy()">销毁</button>
		
		<script src="js/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					count: 1
				},
				methods: {
					add() {
						this.count ++
					},
					test() {
						console.log("methods")
					}
				},
				beforeCreate() {
					console.log("1_beforeCreate")
					console.log(this.count)
				},
				created() {
					console.log("2_created")
					console.log(this.count)
				},
				beforeMount() {
					console.log("3_beforeMount")
				},
				mounted() {
					console.log("4_mounted")
					console.log(this.$el)
				},
				beforeUpdate() {
					console.log("5_beforeUpdate")
				},
				updated() {
					console.log("6_updated")
				},
				beforeDestroy() {
					console.log("7_beforeDestroy")
				},
				destroyed() {
					console.log("8_destroyed")
				}
			})
		</script>
	</body>
</html>